<template>
  <div class="paper">
    <NavHeader title="开题报告" />
    <div class="paper-contanier">
      <div class="contanier-left">
        <LeftSider
          title="报告"
          :id="id"
          :list="chatlist"
          @transmit="getMessage"
          @del="del"
          @clear="clear"
        />
      </div>
      <div class="contanier-right">
        <div v-if="type == 0" class="content1">
          <div class="paper-title">开题报告</div>
          <div class="paper-content">
            <div class="content-tit">提交开题报告标题</div>
            <el-input
              v-model="text"
              placeholder="输入完整的开题报告标题，获得更好的生成效果(5-50字内或20个单词内）"
            ></el-input>
            <div class="content-radio">
              <span class="label">选择学历：</span>
              <el-radio-group v-model="radio">
                <el-radio :label="1">大专</el-radio>
                <el-radio :label="2">本科</el-radio>
                <el-radio :label="3">硕士</el-radio>
              </el-radio-group>
            </div>
            <div class="content-check">
              <el-checkbox v-model="checked"></el-checkbox>
              <span
                >我已阅读并同意：生成的任何与论文相关的仅用于参考，不作为毕业、发表使用</span
              >
            </div>
            <div class="content-btn">
              <div>
                语言类型：
                <el-button-group>
                  <el-button
                    type="primary"
                    :class="lan == 'chinese' ? 'selected' : ''"
                    @click="changeLang('chinese')"
                    >中文</el-button
                  >
                  <el-button
                    type="primary"
                    :class="lan == 'english' ? 'selected' : ''"
                    @click="changeLang('english')"
                    >英文</el-button
                  >
                </el-button-group>
              </div>
              <div class="cbtn" @click="checkTokens">立即生成</div>
            </div>
          </div>
        </div>
        <div v-if="type == 1" class="content2">
          <div class="title">{{ reportTitle }}</div>

          <div class="text">
            <v-md-preview class="content" :text="repotrContent" />
          </div>

          <div class="pbtn" @click="download">导出</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import LeftSider from "@/components/LeftSider";
import { openingReport } from "@/api/chat";
import { saveAs } from "file-saver";
import { fetchData } from "@/utils";
import { getChatHis, delChatHis } from "@/api/translate";
import { getUserToken } from "@/api/api";
import MarkdownIt from "markdown-it";
export default {
  name: "Report",
  components: {
    NavHeader,
    LeftSider,
  },
  data() {
    return {
      id: 0,
      cacheFilter: { type: "2" },
      input: "",
      radio: 2,
      checked: false,
      type: 0,
      education: "",
      text: "",
      chatlist: [],
      reportTitle: "",
      repotrContent: "",
      isloading: false,
      timer: null,
      lan: "chinese",
    };
  },
  mounted() {
    this.getChatHisList();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    changeLang(value) {
      this.lan = value;
    },
    checkTokens() {
      fetchData(getUserToken, 7).then((res) => {
        if (res) {
          this.openingReport();
        } else {
          this.$message.warning("您的token不足，请充值!");
        }
      });
    },
    openingReport() {
      if (this.text.trim() == "") {
        this.$message.warning("请输入内容！");
        return;
      }
      if (!this.checked) {
        this.$message.warning("请勾选同意相关协议！");
        return;
      }
      this.isloading = true;
      fetchData(openingReport, {
        text: this.text,
        education: this.radio,
        lan: this.lan,
      }).then(() => {
        this.type = 1;
        this.timer = setInterval(() => {
          this.getChatHisList(true);
        }, 3000);
      });
    },
    getChatHisList(bol) {
      fetchData(
        getChatHis,
        {
          ...this.cacheFilter,
          pagesize: 20,
          pagenum: this.pagenum,
        },
        false
      ).then((res) => {
        this.chatlist = res?.list || [];
        this.pages = res.pages;
        if (bol) {
          this.repotrContent = this.chatlist[0].backtext || "";
          this.reportTitle = this.chatlist[0].fromtext;
          this.id = this.chatlist[0].id;
          if (this.chatlist.length > 0 && this.chatlist[0].syncstatus == "01") {
            clearInterval(this.timer);
            this.isloading = false;
          }
        }
      });
    },
    del(data) {
      fetchData(delChatHis, { id: data.id }, false).then(() => {
        this.$message.success("删除成功!");
        this.pagenum = 1;
        this.getChatHisList();
        this.clear();
      });
    },
    clear() {
      if (this.isloading) return;
      if (this.id == 0) {
        this.$message.warning("当前已是新开题报告!");
      } else {
        this.id = 0;
        this.repotrContent = "";
        this.reportTitle = "";
        this.type = "0";
      }
    },
    getMessage(data) {
      if (this.isloading) return;
      data.syncstatus = "01";
      this.type = 1;
      this.repotrContent = data.backtext || "";
      this.reportTitle = data.fromtext;
      this.id = data.id;
    },

    download() {
      var md = new MarkdownIt();
      const convertedHtml = md.render(this.repotrContent);

      const blob = new Blob([convertedHtml], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      console.log(blob);
      saveAs(blob, `${this.reportTitle}.doc`);
    },
  },
};
</script>

<style lang="less" scoped>
.paper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .paper-contanier {
    flex: 1;
    display: flex;
    overflow: hidden;
    .contanier-left {
      height: 100%;
    }
    .contanier-right {
      flex: 1;
      background-color: #fff;
      overflow: auto;
      .content1 {
        min-width: 1200px;
        padding: 30px 0 80px;
        box-sizing: border-box;
        .paper-tip {
          height: 50px;
          background: linear-gradient(90deg, #fff, #f3f7ff);
          box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.06);
          border-radius: 10px 10px 10px 10px;
          width: 100%;
          border: 2px solid #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 30px;
          position: relative;
          box-sizing: border-box;
          .tip-img1 {
            position: absolute;
            top: 0;
            left: 0;
          }
          span {
            color: #3f4654;
            display: flex;
            align-items: center;
          }
          .tip-img2 {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .paper-title {
          font-size: 30px;
          font-weight: 400;
          color: #3f4654;
          line-height: 42px;
          margin-top: 130px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .paper-content {
          max-width: 720px;
          margin: 0 auto;
          margin-top: 130px;
          .content-tit {
            font-size: 16px;
            font-weight: 400;
            color: #3f4654;
            line-height: 22px;
            position: relative;
            padding-left: 10px;
            box-sizing: border-box;
            margin-bottom: 14px;
            &::before {
              content: "";
              width: 4px;
              height: 18px;
              background: #547dff;
              border-radius: 4px 4px 4px 4px;
              margin-right: 6px;
              position: absolute;
              left: 0;
              top: 3px;
            }
          }
          .content-radio {
            display: flex;
            align-items: center;
            margin-top: 24px;
            .label {
              font-size: 14px;
              font-weight: 400;
              color: #8b9098;
              line-height: 20px;
              margin-right: 10px;
            }
          }
          .content-check {
            margin-top: 24px;
            text-align: left;
            display: flex;
            align-items: center;
            cursor: pointer;
            span {
              font-size: 14px;
              margin-left: 10px;
              color: #9ea2a9;
            }
          }
        }
        .content-btn {
          margin-top: 40px;
          display: flex;
          justify-content: flex-start;
          /deep/ .el-button--primary {
            height: 46px;
            background: white;
            border-color: #cbcdd0;
            color: #8b9098;
          }
          .selected {
            background: linear-gradient(90deg, #408cff, #577bff) !important;
            color: white !important;
          }
          .cbtn {
            width: 180px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background: linear-gradient(90deg, #408cff, #577bff);
            box-shadow: 0 0 30px 1px rgba(70, 122, 242, 0.12);
            border-radius: 8px 8px 8px 8px;
            font-size: 16px;
            font-weight: 400;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
            margin-left: 20%;
            &:hover {
              box-shadow: 0 0 35px 1px rgba(70, 122, 242, 0.32);
            }
          }
        }
      }
      .content2 {
        background-color: #fff;
        width: 960px;
        margin: 0 auto;
        padding: 30px 30px 80px;
        box-sizing: border-box;
        min-height: calc(100vh - 54px);
        position: relative;
        .title {
          text-align: center;
          font-size: 30px;
          font-weight: 400;
          color: #3f4654;
          line-height: 42px;
          margin-top: 130px;
        }
        .text {
          font-size: 14px;
          line-height: 28px;
          color: #141414;
          margin-top: 60px;
        }
        .pbtn {
          position: absolute;
          top: 60px;
          right: 40px;
          border: none;
          outline: none;
          width: 132px;
          height: 36px;
          line-height: 36px;
          border-radius: 6px;
          text-align: center;
          color: #fff;
          background-color: #6965ea;
          cursor: pointer;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
